<template>
  <div class="panel">
    <header class="panel-header">
      <h2 class="panel-title">{{title}}</h2>
    </header>
    <main class="panel-content">
      <slot></slot>
    </main>
  </div>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
      required: true
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../stylesheets/mixins/_standard.scss';

.panel {
  background: white;
}

.panel-header {
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: -1px;
}

.panel-title {
  color: $primaryColor;
  font-size: $primarySize;
  font-weight: $primaryBold;
  text-align: center;
  padding: 10px 20px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
